import { Button } from "antd";
import IconMap from "./IconMap";
import { useState } from "react";
import { cn } from "@/utils/twMerge";

const FilterContiner = ({ children }: any) => {
  const [visible, setVisible] = useState(true);
  const toggleVisible = () => {
    setVisible(!visible);
  };
  return (
    <div
      className={cn(
        "relative h-full transition-[flex-basis]",
        visible ? "flex-[0_0_250px]" : "flex-[0_0_0px]"
      )}
    >
      <div
        className={cn(
          "absolute inset-0 w-[250px] bg-white shadow-lg p-4 transition-transform duration-250",
          visible ? "translate-x-0" : "-translate-x-full"
        )}
      >
        {children}
      </div>

      <div
        className="absolute top-1/2 -translate-y-1/2 right-0 h-16 w-3 bg-blue-400 flex justify-center items-center"
        onClick={toggleVisible}
      >
        <Button type="link" block className="!text-white">
          x
        </Button>
      </div>
    </div>
  );
};

export default FilterContiner;
